<template>
  <!-- 项目的最外层 -->
  <div class="outer">
    <!-- 主要内容区域 -->
    <section class="con">
      <!-- 主要内容区域 -->
      <div class="mainCon">
        <!-- 左侧放大镜区域 -->
        <div class="previewWrap">
          <!--放大镜效果-->
          <div class="preview">
            <div class="jqzoom">
              <img src="./images/323a91d9-3f34-4e8e-9860-b91e3234d596.jpg" />
            </div>
          </div>
          <!--下方的缩略图-->
          <div class="specScroll">
            <!--左按钮-->
            <span class="prev">&lt;</span>
            <!-- 中间可滑动区域 -->
            <div class="items">
              <div class="itemsCon">
                <img src="./images/3e20b7f7-b0d1-4dac-a62a-e640ba68a6cd.jpg" />
                <img src="./images/3e20b7f7-b0d1-4dac-a62a-e640ba68a6cd.jpg" />
                <img src="./images/3e20b7f7-b0d1-4dac-a62a-e640ba68a6cd.jpg" />
                <img src="./images/3e20b7f7-b0d1-4dac-a62a-e640ba68a6cd.jpg" />
              </div>
            </div>
            <!--右按钮-->
            <span class="next">&gt;</span>
          </div>
          <img class="xuanguan" src="./images/pc_xuanguan.png" />
        </div>
        <!-- 右侧选择区域布局 -->
        <div class="InfoWrap">
          <!-- 标题 -->
          <div class="goodsDetail">
            <P>
              2020款 MacBook Air 13 英寸M1芯片八核【屏幕膜套餐】笔记本电脑
            </P>
          </div>
          <!-- 商品价格 -->
          <div class="price">
            <div class="price-picture">
              <img
                class="clearfix"
                src="./images/4ebf4f6c4309dfed3c28a2576618f2e9.png"
              />
            </div>
          </div>

          <!-- 购物车 -->
          <div class="choose">
            <div class="cartWrap">
              <div class="controls">
                <input autocomplete="off" value="1" class="itxt" />
                <a href="###" class="plus">+</a>
                <a href="###" class="mins">-</a>
              </div>
              <div class="add">
                <a href="###" target="_blank">加入购物车</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 内容详情页 -->
    <section class="productDetail"></section>

    <!-- 猜你喜欢 -->
    <div class="like">
      <h4 class="kt">猜你喜欢</h4>
      <ul class="like-list">
        <li class="likeItem">
          <div class="p-img">
            <img src="./images/itemlike01.png" />
          </div>
          <div class="attr">
            <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
          </div>
          <div class="price">
            <em>¥</em>
            <i>3699.00</i>
          </div>
          <div class="commit">已有6人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="./images/itemlike02.png" />
          </div>
          <div class="attr">
            Apple苹果iPhone 6s/6s Plus 16G 64G 128G
          </div>
          <div class="price">
            <em>¥</em>
            <i>4388.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="./images/itemlike03.png" />
          </div>
          <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
          <div class="price">
            <em>¥</em>
            <i>4088.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="./images/itemlike04.png" />
          </div>
          <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
          <div class="price">
            <em>¥</em>
            <i>4088.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="./images/itemlike05.png" />
          </div>
          <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
          <div class="price">
            <em>¥</em>
            <i>4088.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
        <li class="likeItem">
          <div class="p-img">
            <img src="./images/itemlike06.png" />
          </div>
          <div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
          <div class="price">
            <em>¥</em>
            <i>4088.00</i>
          </div>
          <div class="commit">已有700人评价</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
};
</script>

<style lang="less" scoped>
.outer {
  .con {
    width: 1200px;
    margin: 15px auto 0;

    .mainCon {
      overflow: hidden;
      margin: 5px 0 15px;
      .previewWrap {
        float: left;
        width: 400px;
        position: relative;
        .preview {
          width: 400px;
          height: 400px;
          border: 1px solid #dfdfdf;
          .jqzoom {
            cursor: pointer;
            width: 400px;
            height: 400px;
            position: relative;
            img {
              width: 100%;
            }
          }
        }
        .specScroll {
          margin-top: 5px;
          width: 400px;
          overflow: hidden;

          .next {
            text-align: center;
            width: 10px;
            height: 54px;
            line-height: 54px;
            border: 1px solid #ccc;
            background: #ebebeb;
            cursor: pointer;
          }
          .prev {
            float: left;
            margin-right: 4px;
            background: rgba(0, 0, 0, 0.3);
            width: 20px;
            height: 55px;
          }

          .next {
            float: right;
            background: rgba(0, 0, 0, 0.3);
            width: 20px;
            height: 55px;
            position: absolute;
            right: -2px;
          }

          .items {
            float: left;
            position: relative;
            width: 372px;
            height: 56px;
            overflow: hidden;
            .itemsCon {
              position: absolute;
              width: 9999px;
              height: 56px;
              left: 0;
              img {
                float: left;
                text-align: center;
                border: 1px solid #ccc;
                padding: 2px;
                width: 50px;
                height: 50px;
                margin-right: 5px;
              }
            }
          }
        }
        .xuanguan {
          margin: 35px 0;
        }
      }
      .InfoWrap {
        width: 700px;
        float: right;

        .goodsDetail {
          color: #4d4d4d;
          margin-bottom: 10px;
          p {
            font-size: 16px;
            color: #333;
            max-height: 40px;
            overflow: hidden;
            line-height: 20px;
            margin-top: 8px;
            margin-bottom: 8px;
            font-weight: 700;
          }
        }

        .price {
          padding-bottom: 0;
          .price-picture {
            .clearfix {
              width: 592px;
              height: 161px;
            }
          }
        }

        .choose {
          .cartWrap {
            .controls {
              width: 48px;
              position: relative;
              float: left;
              margin-right: 15px;
              .itxt {
                width: 38px;
                height: 37px;
                border: 1px solid #ddd;
                color: #555;
                float: left;
                border-right: 0;
                text-align: center;
              }
              .plus,
              .mins {
                width: 15px;
                text-align: center;
                height: 17px;
                line-height: 17px;
                background: #f1f1f1;
                color: #666;
                position: absolute;
                right: -8px;
                border: 1px solid #ccc;
              }
              .mins {
                right: -8px;
                top: 19px;
                border-top: 0;
              }
              .plus {
                right: -8px;
              }
            }
            .add {
              float: left;
              a {
                background-color: #e1251b;
                padding: 0 25px;
                font-size: 16px;
                color: #fff;
                height: 36px;
                line-height: 36px;
                display: block;
              }
            }
          }
        }
      }
    }
  }
  .productDetail {
  }
  .like {
    width: 1198px;
    border: 1px solid #ddd;
    margin: 15px auto;
    .kt {
      border-bottom: 1px solid #ddd;
      background: #f1f1f1;
      color: #333;
      margin: 0;
      padding: 5px 10px;
    }
    .like-list {
      padding: 15px 11px;
      overflow: hidden;
      .likeItem {
        width: 196px;
        float: left;
        .p-img {
          text-align: center;
          img {
            width: 167px;
            height: 123px;
          }
        }
        .attr {
          padding: 0 15px;
        }
        .price {
          padding: 0 15px;
          font-size: 16px;
          color: #c81623;
          margin-bottom: 20px;
        }
        .commit {
          padding: 0 15px;
        }
      }
    }
  }
}
</style>
